<template>
  <div>
    <dl class="dl">
      <dt>
        <svg-icon icon-class="dianshi" @click="fn('dianshi')"></svg-icon>
      </dt>
      <dd>
        <span>
          <svg-icon icon-class="qianbao" @click="fn('qianbao')"></svg-icon>
        </span>
        <span>
          <svg-icon icon-class="erweima" @click="fn('erweima')"></svg-icon>
        </span>
      </dd>
    </dl>
    <p>
      <span>账号</span>
      <span>等级</span>
      <span>会员</span>
    </p>
    <p>
      B币：
      <span></span>硬币：
      <span></span>
    </p>
    <p>
      <strong>我是大会员</strong>了解更多权益
      开通大会员畅看番剧国创
      <span>></span>
    </p>
    <hr />
    <ol>
      <li>
        <span>1</span>
        <span>动态</span>
      </li>
      <li>
        <span>1</span>
        <span>关注</span>
      </li>
      <li>
        <span>1</span>
        <span>粉丝</span>
      </li>
    </ol>
    <hr />
    <ul>
      <li>首页</li>
      <li>历史记录</li>
      <li>下载管理</li>
      <li>我的收藏</li>
      <li>稍后再看</li>
      <li>个性装扮</li>
    </ul>
    <ul>
      <li>发布</li>
      <li>创作中心</li>
      <li>热门活动</li>
    </ul>
    <ul>
      <li>直播中心</li>
      <li>我的课堂</li>
      <li>免流量服务</li>
      <li>我的订单</li>
      <li>会员购中心</li>
      <li>联系客服</li>
      <li>课堂模式</li>
      <li>青少年模式</li>
    </ul>
    <p>
      <span>设置</span>
      <span>主题</span>
      <span>夜间</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    fn(s) {
      console.log(s);
    }
  }
};
</script>

<style lang="less" scoped>
.dl {
  display: flex;
  justify-content: space-around;
  dt {
    background: #ccc;
    border-radius: 50%;
    padding: 0.5rem;
    svg {
      width: 3rem;
      height: 3rem;
    }
  }
  dd {
    display: flex;
    align-items: flex-start;
    span {
      border: 1px solid red;
      display: block;
      border-radius: 50%;
      margin: 0 0.3rem;
      padding: 0.4rem 0.2rem 0.2rem;
    }
    svg {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>